<template>
  <div class="main flex flex-1 flex-col items-center mt-20">
    <t-message theme="error" v-model="visible1"
      :offset="['10px', '16px']" :duration="5000"
      :content="message" />
    <t-dialog
      v-model:visible="showMultiTextAndTitle"
      title="用户和隐私政策"
      cancel-btn="取消"
      confirm-btn="确认"
      @confirm="onConfirm1"
      @cancel="onCancel1">

      您在使用我们的服务时，我们可能会收集和使用您的相关信息。我们希望通过本<t-button class="xieyi"
        theme="primary" size="large"
        variant="text"
        @click="() => {
      router.push({
        name: 'agreement'
      })
    }">《用户协议及隐私政策》</t-button>向您说明，在使用我们的服务时，我们如何收集、使用、储存和分享这些信息，以及我们为您提供的访问、更新、控制和保护这些信息的方式。本<t-button
        class="xieyi"
        theme="primary" size="large"
        variant="text" @click="() => {
      router.push({
        name: 'agreement'
      })
    }">《用户协议及隐私政策》</t-button>，希望您仔细阅读，充分理解协议中的内容后再点击同意。

    </t-dialog>


    <img src="../assets/logo.jpg" class="h-50 w-50 rounded-50 ">

    <t-input v-model="account" class="flex-unset mt-10 h-15 w80%"
      placeholder="请输入账号" />
    <t-input v-model="password" type="password"
      class="flex-unset mt-10 h-15  w80%"
      placeholder="请输入密码" />
    <div class=" mt-10 w-80%">
      <t-button @click="login" size="large" theme="primary"
        block>登录/注册</t-button>
      <div>
        <!-- <div>
          :icon="[activeImage, inActiveImage]"
        </div> -->
        <input v-model="agree" type="checkbox">
        已阅读并同意
        <t-button class="xieyi"
          theme="primary" size="large"
          variant="text" @click="() => {
      router.push({
        name: 'agreement'
      })
    }">服务协议</t-button>
      </div>
    </div>


  </div>
</template>

<script setup>
  import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed } from 'vue'

  import { useStore } from '@/store/loginState'
  import { useRoute, useRouter } from 'vue-router'
  const loginState = useStore()
  /**
  * 路由对象
  */
  const route = useRoute()
  /**
  * 路由实例
  */
  const router = useRouter()
  const account = ref('')
  const password = ref('')
  const visible1 = ref(false)
  const agree = ref(false)
  const message = ref("")
  const showMultiTextAndTitle = ref(false)
  const onConfirm1 = () => {
    agree.value = true
  }
  const onCancel1 = () => { }
  const login = () => {
    // 判断是否为空
    if (account.value.trim() === '' || password.value.trim() === '') {
      message.value = "请输入正确的账号和密码"
      visible1.value = true
    } else if (!agree.value) {
      showMultiTextAndTitle.value = true
    } else {
      loginState.login()
      router.push({ path: '/tab/home' })
    }

  }

</script>
<style scoped lang='less'>
  .xieyi {
    padding: 0;
    vertical-align: baseline;
    height: 22px;
  }
</style>